<template>
  <div class="post-list">
    <div class="poster" :style="'background-image: url('+ article.cover +')'" v-if="article.cover.length"></div>
    <div class="content">
      <a :href="'/web/detail?id=' + article._id " class="title">
        {{article.title}}
      </a>
      <div class="desc">
        {{article.desc}}
      </div>
      <div class="info">
        <i class="iconfont icon-shijian"></i>
        <p>{{article.createTime | FDateTime('YYYY-MM-DD')}}</p>
        <i class="iconfont icon-biaoqian"></i>
        <p v-for="(article, index) in article.tag" :key="index">
          <a :href="'/tag/' + article">{{article}}</a>
        </p>
        <!-- 查看与点赞 -->
        <i class="iconfont icon-chakan"></i>
        <p>{{article.look}}</p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    article: {
      type: Object,
      required: true
    }
  }
}
</script>

<style lang="scss">
  .post-list {
    padding: 20px;
    margin-bottom: 30px;
    box-shadow: 0 0 6px #888888;
    display: flex;
    .poster {
      background: rgba(50, 50, 93, .15) no-repeat center / cover;
      width: 260px;
      height: 180px;
      margin-right: 10px;
      flex-shrink: 0;
    }
    .content {
      position: relative;
      padding-bottom: 25px;
      flex: 1;
      .title {
        font-size: 18px;
        line-height: 1.5;
        color: #3084bb;
      }
      .desc {
        width: 100%;
        font-size: 14px;
        line-height: 1.5;
        color: #555;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 5;
        -webkit-box-orient: vertical;
      }
      .info {
        display: flex;
        align-content: center;
        color: #999;
        position: absolute;
        left: 0;
        bottom: 0;
        i {
          font-size: 13px;
          display: inline-block;
          margin-top: 2px;
        }
        P {
          margin: 0 10px 0 5px;
          font-size: 13px;
        }
        a {
          color: #999;
          text-decoration: underline;
        }
      }
    }
  }
</style>
